<template>
    <view class="containers">
		<view class="header_wi">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('shangpins.sousuo') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
        <view class="cont-box" style="margin-top:68px;">
			
            <view class="dis-flex search-input-box">
                <view class="search-input">
                    <view class="dis-flex search-box">
                        <view class="left">
                            <icon color="rgba(180,180,180,1)" size="15" type="search"></icon>
                        </view>
                        <view class="right">
                            <input @input="getSearchContent" class="input" :focus="true" :placeholder="$t('shangpins.sousuotxt')" placeholderStyle="color:#aba9a9" type="text" />
                        </view>
                    </view>
                </view>
                <view class="serch-button">
                    <button @tap="search" type="warn">{{$t('shangpins.sousuo')}}</button>
                </view>
            </view>
            <view class="search-cont-box" v-if="recentSearch.length">
                <view class="title-box">
                    {{$t('shangpins.zuijin')}}
                    <text @tap="clearSearch" class="iconfont icon-lajixiang col-7"></text>
                </view>
                <view class="sale-button-box">
                    <view class="seconds-kill-li" v-for="(recent, idx) in recentSearch" :key="recent.hotrecent">
                        <view @tap="goSearch" class="recent-button" :data-text="recent">{{ recent }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
let app = getApp();
export default {
    data() {
        return {
            recentSearch: [],
            searchValue: '',
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,	
            recent: {
                hotrecent: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取历史搜索
        this.getRecentSearch();
    },
    methods: {
		jumpzuo() {
		    uni.navigateBack()
		},
        /**
         * 获取历史搜索
         */
        getRecentSearch: function () {
            let recentSearch = uni.getStorageSync('recentSearch');
            this.setData({
                recentSearch
            });
        },

        /**
         * 绑定输入值
         */
        getSearchContent: function (e) {
            this.searchValue = e.detail.value;
        },

        /**
         * 搜索提交
         */
        search: function () {
            if (this.searchValue) {
                // 记录最近搜索
                let recentSearch = uni.getStorageSync('recentSearch') || [];
                let index = recentSearch.indexOf(this.searchValue);

                if (index > -1) {
                    recentSearch.splice(index, 1);
                }

                recentSearch.unshift(this.searchValue);
                uni.setStorageSync('recentSearch', recentSearch); // 跳转到商品列表页

                uni.navigateTo({
                    url: '../category/list?search=' + this.searchValue
                });
            }
        },

        /**
         * 清空最近搜索记录
         */
        clearSearch: function () {
            uni.removeStorageSync('recentSearch');
            this.getRecentSearch();
        },

        /**
         * 跳转到最近搜索
         */
        goSearch: function (e) {
            uni.navigateTo({
                url: '../category/list?search=' + e.target.dataset.text
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
